<template>
  <div class="map">
    <h2>使用三方库实现地图</h2>
    <div id="my-map" class="my-map"></div>
  </div>
</template>

<script>
export default {
  name: "Map",
};
</script>

<script setup>
import { ref } from "vue";
import {
  arr,
  arr1,
  arr2,
  arr3,
  arr4,
  arr5,
  arr6,
  arr7,
  arr8,
  arr9,
  arr10,
  arr11,
  arr12,
  arr13,
  arr14,
  arr15,
  list,
} from "./map";
import { getMapDataOne, getMapDataTwo, getMapDataThree } from "@/mock/apis";

const lineListOne = getMapDataOne();
const lineListTwo = getMapDataTwo();
const lineListThree = getMapDataThree();

const map = ref(null);

SGMap.tokenTask
  .login("5141ad177ccc3f6689124c97ba18c74b", "fa1b2fd8ca493c47b19f3cf9b51029ae")
  .then(function () {
    initMap();
  });

const initMap = () => {
  map.value = new SGMap.Map({
    // 地图绑定的DOM元素ID
    container: "my-map",
    // 地图样式
    style: "aegis://styles/aegis/StreetsDark-v2",
    // 默认缩放层级
    zoom: 10.3,
    // 地图中心点
    center: [116.397428, 39.90923],
    // 地图默认字体
    localIdeographFontFamily: "Microsoft YoHei",
    center: [114.97348, 34.87799],
    pitch: 45,
  });

  map.value.on("load", function (e) {
    map.value.addLayer({
      id: "powers",
      type: "line",
      source: {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr1(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr2(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr3(), //谷营
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr4(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr5(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr6(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr7(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr8(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr9(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr10(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr11(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr12(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr13(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr14(),
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "LineString",
                // lineString类型的几何对象为2层数组，MultiLineString类型为3层数组
                coordinates: arr15(),
              },
            },
          ],
        },
      },
      layout: {
        "line-cap": "round",
        "line-join": "round",
      },
      paint: {
        "line-color": "#fff",
        "line-width": 2,
      },
    });
  });
};

const putMarks = () => {

}
</script>

<style lang='scss' scoped>
.map {
  width: 100%;
  height: 80vh;
  h2 {
    text-align: center;
  }
  .my-map {
    width: 100%;
    height: 80vh;
    background: #000016;
  }
}
</style>